<template>
  <view class="help-records-page">
    <!-- 统计信息区域 -->
    <view class="stats-section">
      <view class="section-title">
        <u-icon name="bar-chart" size="24" color="#666"></u-icon>
        <text class="title-text">统计信息</text>
      </view>
      
      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-icon">🚨</view>
          <view class="stat-content">
            <text class="stat-number">{{ totalRecords }}</text>
            <text class="stat-label">总求助次数</text>
          </view>
        </view>
        
        <view class="stat-item">
          <view class="stat-icon">✅</view>
          <view class="stat-content">
            <text class="stat-number">{{ resolvedRecords }}</text>
            <text class="stat-label">已解决</text>
          </view>
        </view>
        
        <view class="stat-item">
          <view class="stat-icon">⏳</view>
          <view class="stat-content">
            <text class="stat-number">{{ pendingRecords }}</text>
            <text class="stat-label">处理中</text>
          </view>
        </view>
        
        <view class="stat-item">
          <view class="stat-icon">📅</view>
          <view class="stat-content">
            <text class="stat-number">{{ thisMonth }}</text>
            <text class="stat-label">本月求助</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="section-title">
        <text class="title-icon">🔍</text>
        <text class="title-text">筛选条件</text>
      </view>
      
      <view class="filter-options">
        <view class="filter-item" @click="toggleFilter(0)">
          <text class="filter-text">全部类型</text>
          <text class="filter-arrow" :class="{ 'arrow-down': expandedFilter[0] }">></text>
        </view>
        
        <view class="filter-dropdown" v-if="expandedFilter[0]">
          <view class="filter-option" @click="selectType('all')">
            <text class="option-text">全部类型</text>
            <text class="option-check" v-if="selectedType === 'all'">✓</text>
          </view>
          <view class="filter-option" @click="selectType('property')">
            <text class="option-text">物业求助</text>
            <text class="option-check" v-if="selectedType === 'property'">✓</text>
          </view>
          <view class="filter-option" @click="selectType('medical')">
            <text class="option-text">医疗急救</text>
            <text class="option-check" v-if="selectedType === 'medical'">✓</text>
          </view>
          <view class="filter-option" @click="selectType('fire')">
            <text class="option-text">消防求助</text>
            <text class="option-check" v-if="selectedType === 'fire'">✓</text>
          </view>
          <view class="filter-option" @click="selectType('police')">
            <text class="option-text">报警求助</text>
            <text class="option-check" v-if="selectedType === 'police'">✓</text>
          </view>
        </view>
        
        <view class="filter-item" @click="toggleFilter(1)">
          <text class="filter-text">全部状态</text>
          <text class="filter-arrow" :class="{ 'arrow-down': expandedFilter[1] }">></text>
        </view>
        
        <view class="filter-dropdown" v-if="expandedFilter[1]">
          <view class="filter-option" @click="selectStatus('all')">
            <text class="option-text">全部状态</text>
            <text class="option-check" v-if="selectedStatus === 'all'">✓</text>
          </view>
          <view class="filter-option" @click="selectStatus('pending')">
            <text class="option-text">待处理</text>
            <text class="option-check" v-if="selectedStatus === 'pending'">✓</text>
          </view>
          <view class="filter-option" @click="selectStatus('processing')">
            <text class="option-text">处理中</text>
            <text class="option-check" v-if="selectedStatus === 'processing'">✓</text>
          </view>
          <view class="filter-option" @click="selectStatus('resolved')">
            <text class="option-text">已解决</text>
            <text class="option-check" v-if="selectedStatus === 'resolved'">✓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 求助记录列表 -->
    <view class="records-section">
      <view class="section-title">
        <u-icon name="list" size="24" color="#666"></u-icon>
        <text class="title-text">求助记录</text>
        <text class="title-count">({{ filteredRecords.length }})</text>
      </view>
      
      <view class="records-list">
        <view 
          class="record-item" 
          v-for="record in filteredRecords" 
          :key="record.id"
          @click="viewRecordDetail(record)"
        >
          <view class="record-header">
            <view class="record-type">
              <text class="type-icon">{{ getTypeIcon(record.type) }}</text>
              <text class="type-text">{{ getTypeText(record.type) }}</text>
            </view>
            <view class="record-status">
              <text class="status-text" :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</text>
            </view>
          </view>
          
          <view class="record-content">
            <text class="record-title">{{ record.title }}</text>
            <text class="record-desc">{{ record.description }}</text>
            <text class="record-time">{{ formatTime(record.createTime) }}</text>
          </view>
          
          <view class="record-footer">
            <view class="record-location" v-if="record.location">
              <u-icon name="map-pin" size="24" color="#666"></u-icon>
              <text class="location-text">{{ record.location }}</text>
            </view>
            <view class="record-priority" v-if="record.priority">
              <text class="priority-text" :class="getPriorityClass(record.priority)">{{ getPriorityText(record.priority) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-if="filteredRecords.length === 0">
      <view class="empty-icon">📭</view>
      <text class="empty-title">暂无求助记录</text>
      <text class="empty-desc">您还没有发起过求助，或者当前筛选条件下没有匹配的记录</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && filteredRecords.length > 0">
      <text class="load-text" @click="loadMore">加载更多</text>
    </view>
  </view>
</template>

<script setup>
/**
 * 求助记录页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 求助记录功能页面，提供查看历史求助记录等功能
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 页面数据
const expandedFilter = ref([false, false])
const selectedType = ref('all')
const selectedStatus = ref('all')
const hasMore = ref(true)

// 统计信息
const totalRecords = ref(15)
const resolvedRecords = ref(12)
const pendingRecords = ref(2)
const thisMonth = ref(3)

// 求助记录数据
const helpRecords = ref([
  {
    id: 1,
    type: 'property',
    title: '水管漏水求助',
    description: '厨房水管出现漏水，需要紧急维修',
    status: 'resolved',
    priority: 'high',
    location: 'A区1号楼3单元301室',
    createTime: '2025-01-30 14:30:25'
  },
  {
    id: 2,
    type: 'medical',
    title: '老人摔倒求助',
    description: '家中老人意外摔倒，需要医疗救助',
    status: 'resolved',
    priority: 'urgent',
    location: 'A区1号楼2单元201室',
    createTime: '2025-01-29 16:45:18'
  },
  {
    id: 3,
    type: 'fire',
    title: '厨房冒烟求助',
    description: '厨房出现冒烟情况，怀疑是电器故障',
    status: 'resolved',
    priority: 'high',
    location: 'A区2号楼1单元101室',
    createTime: '2025-01-28 12:15:42'
  },
  {
    id: 4,
    type: 'police',
    title: '可疑人员求助',
    description: '发现可疑人员在小区内徘徊',
    status: 'processing',
    priority: 'medium',
    location: '小区东门附近',
    createTime: '2025-01-27 20:30:15'
  },
  {
    id: 5,
    type: 'property',
    title: '电梯故障求助',
    description: '电梯无法正常运行，被困在电梯内',
    status: 'resolved',
    priority: 'high',
    location: 'A区1号楼电梯',
    createTime: '2025-01-26 09:20:33'
  }
])

// 计算属性
const filteredRecords = computed(() => {
  let records = helpRecords.value
  
  // 按类型筛选
  if (selectedType.value !== 'all') {
    records = records.filter(record => record.type === selectedType.value)
  }
  
  // 按状态筛选
  if (selectedStatus.value !== 'all') {
    records = records.filter(record => record.status === selectedStatus.value)
  }
  
  return records
})

// 页面方法
const goBack = () => {
  uni.navigateBack()
}

const refreshPage = () => {
  uni.showToast({
    title: '页面已刷新',
    icon: 'success'
  })
}

const toggleFilter = (index) => {
  expandedFilter.value[index] = !expandedFilter.value[index]
}

const selectType = (type) => {
  selectedType.value = type
  expandedFilter.value[0] = false
}

const selectStatus = (status) => {
  selectedStatus.value = status
  expandedFilter.value[1] = false
}

const viewRecordDetail = (record) => {
  uni.showModal({
    title: '求助详情',
    content: `类型：${getTypeText(record.type)}\n标题：${record.title}\n描述：${record.description}\n状态：${getStatusText(record.status)}\n优先级：${getPriorityText(record.priority)}\n位置：${record.location || '未提供'}\n时间：${formatTime(record.createTime)}`,
    showCancel: false,
    confirmText: '知道了'
  })
}

const loadMore = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 工具方法
const getTypeIcon = (type) => {
  const icons = {
    property: '🏠',
    medical: '🚑',
    fire: '🚒',
    police: '👮'
  }
  return icons[type] || '❓'
}

const getTypeText = (type) => {
  const texts = {
    property: '物业求助',
    medical: '医疗急救',
    fire: '消防求助',
    police: '报警求助'
  }
  return texts[type] || '未知类型'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决'
  }
  return texts[status] || '未知状态'
}

const getStatusClass = (status) => {
  const classes = {
    pending: 'status-pending',
    processing: 'status-processing',
    resolved: 'status-resolved'
  }
  return classes[status] || ''
}

const getPriorityText = (priority) => {
  const texts = {
    low: '低优先级',
    medium: '中优先级',
    high: '高优先级',
    urgent: '紧急'
  }
  return texts[priority] || '未知优先级'
}

const getPriorityClass = (priority) => {
  const classes = {
    low: 'priority-low',
    medium: 'priority-medium',
    high: 'priority-high',
    urgent: 'priority-urgent'
  }
  return classes[priority] || ''
}

const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString()
  }
}

// 页面生命周期
onMounted(() => {
  console.log('求助记录页面已加载')
})
</script>

<style scoped>
.help-records-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  padding-bottom: 40rpx;
  width: 100%;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.title-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.title-count {
  color: #666;
  font-size: 24rpx;
  margin-left: 20rpx;
}

/* 统计信息区域 */
.stats-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #9b59b6;
}

.stat-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.stat-content {
  flex: 1;
}

.stat-number {
  display: block;
  color: #9b59b6;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 24rpx;
}

/* 筛选区域 */
.filter-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.filter-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.filter-text {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.filter-arrow {
  color: #666;
  font-size: 24rpx;
  transition: transform 0.3s ease;
}

.arrow-down {
  transform: rotate(90deg);
}

.filter-dropdown {
  background: #fff;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  margin-top: -10rpx;
  overflow: hidden;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.filter-option:last-child {
  border-bottom: none;
}

.filter-option:active {
  background: #f8f9fa;
}

.option-text {
  color: #333;
  font-size: 26rpx;
}

.option-check {
  color: #9b59b6;
  font-size: 24rpx;
  font-weight: bold;
}

/* 求助记录列表 */
.records-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.record-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.record-type {
  display: flex;
  align-items: center;
}

.type-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.type-text {
  color: #333;
  font-size: 26rpx;
  font-weight: 500;
}

.record-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background: #e9ecef;
}

.status-text {
  font-size: 22rpx;
  font-weight: 500;
}

.status-pending {
  color: #ffa502;
}

.status-processing {
  color: #3742fa;
}

.status-resolved {
  color: #2ed573;
}

.record-content {
  margin-bottom: 20rpx;
}

.record-title {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.record-desc {
  display: block;
  color: #666;
  font-size: 26rpx;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.record-time {
  display: block;
  color: #999;
  font-size: 22rpx;
}

.record-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.record-location {
  display: flex;
  align-items: center;
}

.location-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.location-text {
  color: #666;
  font-size: 22rpx;
}

.record-priority {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  background: #e9ecef;
}

.priority-text {
  font-size: 20rpx;
  font-weight: 500;
}

.priority-low {
  color: #2ed573;
}

.priority-medium {
  color: #ffa502;
}

.priority-high {
  color: #ff4757;
}

.priority-urgent {
  color: #ff3742;
}

/* 空状态提示 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  margin: 30rpx;
  padding: 80rpx 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
}

.empty-title {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.empty-desc {
  color: #666;
  font-size: 26rpx;
  text-align: center;
  line-height: 1.6;
}

/* 加载更多 */
.load-more {
  display: flex;
  justify-content: center;
  margin: 40rpx 30rpx;
}

.load-text {
  padding: 20rpx 40rpx;
  background: #fff;
  color: #9b59b6;
  border-radius: 25rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .records-list {
    gap: 20rpx;
  }
  
  .record-item {
    padding: 20rpx;
  }
  
  .stats-section,
  .filter-section,
  .records-section,
  .empty-state {
    margin: 20rpx;
    width: calc(100% - 40rpx);
  }
}
</style>
